<template>
	<main-content>
		<view class="content-color">
			<view class="" v-if="formType=='view'">
				<view class="p-t-16">
				</view>
				<view class="view-group" v-for="(group,groupI) in viewConfig" :key="groupI">
					<view class="view-item p-x-16 p-y-12 flex flex-row justify-between items-center"
						style="border-bottom: 1rpx solid #e1e1e1;" v-for='(item,i) in group' :key="i">
						<view class="list-title">
							{{item.label}}
						</view>
						<view class="">
							{{
								item?.customRender ? item.customRender({formData,text:formData[item.dataIndex]}) : formData[item.dataIndex]
							}}
						</view>
					</view>
				</view>
				<!-- <view class="p-16">
					<u-button type="primary" @click="updateForm">修改</u-button>
				</view> -->
			</view>
			<u-form :model="formData" ref="formDataRef" label-width='auto' v-else
				:label-style="{color: 'rgba(153, 153, 153, 1)' }">
				<view class="" v-if="formType=='update'">
					<view class="p-16">
						<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						登录账号</group-title>
					</view>
					<view class="view-group m-t-8" v-for="(group,groupI) in updateConfig" :key="groupI">
						<view class="view-item p-x-16 p-y-12 flex flex-row justify-between items-center"
							style="border-bottom: 1rpx solid #e1e1e1;" v-for='(item,i) in group' :key="i">
							<view class="list-title">
								{{item.label}}
							</view>
							<view class="">
								{{
									item?.customRender ? item.customRender({formData,text:formData[item.dataIndex]}) : formData[item.dataIndex]
								}}
							</view>
						</view>
					</view>
				</view>
				<view class="p-16">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						基础信息</group-title>
				</view>
				<view class="bg-white p-r-16 p-l-16">
					<u-form-item label="商户名称" prop="companyName" required>
						<u-input input-align='right' v-model="formData.companyName" />
					</u-form-item>
					<u-form-item label="商户简称" prop="companyAbbrName" required>
						<u-input input-align='right' v-model="formData.companyAbbrName" />
					</u-form-item>
					<u-form-item label="联系人" prop="name" required>
						<u-input input-align='right' v-model="formData.name" />
					</u-form-item>
					<u-form-item label="联系方式" prop="phone" required>
						<u-input input-align='right' v-model="formData.phone" />
					</u-form-item>
					<u-form-item label="城市" prop="areaCode" required>
						<!-- <u-input input-align='right'v-model="formData.areaCode" type="select" /> -->
						<myArea input-align='right' clearable v-model="formData.areaCode" />
					</u-form-item>
					<u-form-item label="详细地址" prop="addr" required>
						<u-input input-align='right' v-model="formData.addr" />
					</u-form-item>
					<u-form-item label="授权业务" prop="authBussType" required>
						<my-select clearable input-align='right' v-model="formData.authBussType"
							:options="AUTH_BUSS_TYPE" />
					</u-form-item>
					<u-form-item label="状态" prop="status" required>
						<my-select clearable input-align='right' v-model="formData.status"
							:options="ZZB_AGENT_NO_STATUS" />
					</u-form-item>
					<u-form-item label="开户业务人员" prop="exhibitionId">
						<my-select clearable input-align='right' v-model="formData.exhibitionId"
							:api="exhibitionApi.page" queryParamKey='nameLeftLike' labelKey='name,no'
							:initParams='{ id:formData.exhibitionId }' />
					</u-form-item>
					<u-form-item label="备注" prop="remark" required>
						<u-input input-align='right' v-model="formData.remark" />
					</u-form-item>
				</view>
				<view class="p-16" v-if="formType=='add'">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						账号设置</group-title>
				</view>
				<view class="bg-white p-r-16 p-l-16" v-if="formType=='add'">
					<u-form-item label="账号类型" prop="noType" required>
						<my-select clearable input-align='right' v-model="formData.noType" :options="ZZB_NO_TYPE_MCH" />
					</u-form-item>
					<u-form-item label="登录账号" prop="no" required>
						<u-input input-align='right' v-model="formData.no" />
					</u-form-item>
					<u-form-item label="登录密码" prop="pwd" required>
						<u-input input-align='right' v-model="formData.pwd" type='password' :password-icon='true' />
					</u-form-item>
					<u-form-item label="确认密码" prop="confirmPwd" required>
						<u-input input-align='right' v-model="formData.confirmPwd" type='password'
							:password-icon='true' />
					</u-form-item>
				</view>
				<view class="p-16">
					<u-button type="primary" @click="submit">{{formType == 'add'? '确认新增':'确认修改'}}</u-button>
				</view>

			</u-form>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ZZB_AGENT_NO_STATUS,
		AUTH_BUSS_TYPE,
		ZZB_NO_TYPE_MCH
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel,
		parseTime
	} from '@/common/common.js'
	import {
		agentApi
	} from '@/pages-menus/common/api/agent/index.js'
	import {
		exhibitionApi
	} from '@/pages-menus/common/api/exhibition/index.js'
	import myArea from '@/components/my-area/index.vue'
	import {
		isMulPassword,
		validatePhoneNot
	} from '@/common/validate'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const formType = ref('view')

	// 确认密码校验
	const validateConfirmPassword = (rule, value, callback) => {
		if (value !== formData.value.pwd) {
			callback(new Error('两次输入的密码不一致'))
		} else {
			callback()
		}
	}

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const formDataRef = ref(null)
	const rules = ref({
		no: [{
			required: true,
			message: '登录账号 必填',
			trigger: ['change', 'blur']
		}],
		noType: [{
			required: true,
			message: '账号类型 必填'
		}],
		pwd: [{
				required: true,
				message: '请输入密码',
				trigger: ['change', 'blur']
			},
			{
				min: 8,
				message: '密码长度至少8位',
				trigger: ['change', 'blur']
			},
			{
				max: 20,
				message: '密码长度最多20位',
				trigger: ['change', 'blur']
			},
			{
				validator: isMulPassword,
			},
		],
		confirmPwd: [{
			required: true,
			message: '请确认密码',
			trigger: ['change', 'blur']
		}, {
			validator: isMulPassword
		}, {
			validator: validateConfirmPassword
		}],
		companyName: [{
			required: true,
			message: '公司名称 必填',
			trigger: ['change', 'blur']
		}],
		companyAbbrName: [{
			required: true,
			message: '公司简称 必填',
			trigger: ['change', 'blur']
		}],
		name: [{
			required: true,
			message: '联系人 必填',
			trigger: ['change', 'blur']
		}],
		phone: [{
			required: true,
			message: '联系方式 必填',
			trigger: ['change', 'blur']
		}, {
			validator: validatePhoneNot
		}],
		areaCode: [{
			required: true,
			message: '城市 必填',
			trigger: ['change', 'blur']
		}],
		addr: [{
			required: true,
			message: '地址 必填',
			trigger: ['change', 'blur']
		}],
		authBussType: [{
			required: true,
			message: '授权业务 必填'
		}],
		status: [{
			required: true,
			message: '状态 必填'
		}, ],
		profitDrawType: [{
			required: true,
			message: '分润提现 必填',
			trigger: ['change', 'blur']
		}],
	})
	const initForm = {
		id: undefined,
		no: undefined, //商户账号
		noType: undefined, //商户账号
		pwd: undefined, //商户密码
		confirmPwd: undefined, //商户密码
		companyName: undefined, //公司名称
		companyAbbrName: undefined, //公司简称
		name: undefined, //联系人
		phone: undefined, //联系方式
		areaCode: undefined, //城市，所属区/县ID
		addr: undefined, //地址
		authBussType: undefined, //授权业务，0全部，1开设代理商，2开商户
		status: undefined, //状态，0正常使用，1禁止开代理商，2禁止开商户，3禁止操作人员登录，4系统停止使用，5停止全部收款，6全部禁用
		exhibitionId: undefined, //开户业务人员
		// profitDrawType: undefined, //分润提现，0统一提现，1逐级提现
	}
	const formData = ref({
		...initForm
	})

	// 提交
	const submit = () => {
		console.log('formData.valu==>', formData.value);
		formDataRef.value.validate(async (valid) => {
			if (valid) {
				if (formType.value == 'add') {
					let res = await agentApi.insert(formData.value)
					if (res.code != 200) return
					uni.showToast({
						title: `新增成功！`,
						icon: 'success',
						duration: 2000
					});
				} else {
					let res = await agentApi.update(formData.value)
					if (res.code != 200) return
					uni.showToast({
						title: `修改成功！`,
						icon: 'success',
						duration: 2000
					});
				}
				proxy.$System.goTo('/pages-menus/pages/agent/index', {}, {
					method: 'reLaunch'
				})
			}
		})
	}

	const viewConfig = ref([
		[{
			label: '状态',
			dataIndex: 'status',
			customRender: (data) => {
				return selectDictLabel(ZZB_AGENT_NO_STATUS, data.text)
			},
		}, {
			label: '入网时间',
			dataIndex: 'cTime',
			// customRender: (data) => {
			// 	return 
			// },
		}, {
			label: '登录账号',
			dataIndex: 'no',
		}],
		[{
			label: '代理商名称',
			dataIndex: 'companyName',
		}, {
			label: '所属代理商',
			dataIndex: 'status',
			customRender: (data) => {
				return data.formData.agentInfo?.companyName
			},
		}, {
			label: '代理商等级',
			dataIndex: 'agentInfolevel',
			customRender: (data) => {
				return data.formData.agentInfo?.level
			},
		}, {
			label: '联系人',
			dataIndex: 'name',
		}, {
			label: '联系电话',
			dataIndex: 'phone',
		}, {
			label: '地址',
			dataIndex: 'no',
			customRender: (data) => {
				return `${data.formData.area}${data.formData.addr}`
			},
		}, {
			label: '开户业务人员',
			dataIndex: 'exhibitionName',
		}, {
			label: '备注',
			dataIndex: 'remark',
		}]
	])

	const updateConfig = ref([
		[{
			label: '登录账号',
			dataIndex: 'no',
		}]
	])

	const queryData = ref({})
	const getForm = () => {
		agentApi.findId(queryData.value).then((res) => {
			if (res.code != 200) return
			formData.value = res.data
		})
	}
	const titleMap = {
		add: '新增',
		update: '修改',
		view: '查看',
	}

	const updateForm = () => {
		formType.value = 'update'
		initFormView()
	}

	const initFormView = () => {
		getForm()
		// 动态设置标题
		uni.setNavigationBarTitle({
			title: titleMap[formType.value]
		})
	}

	onLoad(async (options) => {
		formType.value = options.type ?? 'add'
		if (options.id) {
			queryData.value.id = options.id
			initFormView()
		}
	})
	onReady(() => {
		// paging.value.reload()
		nextTick(() => {
			formDataRef.value?.setRules(rules.value);
		})
	})
</script>
<style lang='scss' scoped>
	.view-group {
		background-color: #fff;
	}

	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	.tar {
		:deep(.u-input) {
			text-align: right !important;
		}
	}
</style>